<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0017: Changing the Mouse Pointer | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0017: Changing the Mouse Pointer" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Changing the shape of the mouse pointer based on which GTK widget it’s over - a D language tutorial." />
<meta property="og:description" content="Changing the shape of the mouse pointer based on which GTK widget it’s over - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0017-change-pointer.html" />
<meta property="og:url" content="http://localhost:4000/posts/0017-change-pointer.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-03-12T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0017: Changing the Mouse Pointer" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-03-12T00:00:00-04:00","datePublished":"2019-03-12T00:00:00-04:00","description":"Changing the shape of the mouse pointer based on which GTK widget it’s over - a D language tutorial.","headline":"0017: Changing the Mouse Pointer","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0017-change-pointer.html"},"url":"http://localhost:4000/posts/0017-change-pointer.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/mouse.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-03-12T00:00:00-04:00" itemprop="datePublished">Tuesday, March 12, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0017-changing-the-mouse-pointer">0017: Changing the Mouse Pointer</h1>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/005_mouse/mouse_07.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/005_mouse/no_output_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/005_mouse/mouse_07_change_pointer.d" target="_blank">here</a>.
	</div>
</div>

<p>How many programmers does it take to change a mouse pointer?</p>

<p>I don’t have an answer, but I can tell you how many functions it takes: one. And we’ll be dealing with two such masterful functions this time, <code class="language-plaintext highlighter-rouge">setCursor</code> and <code class="language-plaintext highlighter-rouge">resetCursor</code> which are available to all <em>Widgets</em>.</p>

<p>Their use is straightforward.</p>

<h2 id="code-breakdown">Code Breakdown</h2>

<p>We need quite a list of imports to do this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="n">std</span><span class="p">.</span><span class="n">stdio</span><span class="p">;</span>

<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">MainWindow</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Main</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Widget</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Button</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gdk</span><span class="p">.</span><span class="n">Event</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gdk</span><span class="p">.</span><span class="n">Cursor</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Layout</span><span class="p">;</span>
</code></pre></div></div>

<p>The most obvious new addition is <code class="language-plaintext highlighter-rouge">gdk.Cursor</code> (as before, note the ‘<em>d</em>’ in ‘<em>gdk</em>’). But in this example, the <code class="language-plaintext highlighter-rouge">Cursor</code> class is only needed for instantiation. The <code class="language-plaintext highlighter-rouge">CursorType</code> enum is found in <code class="language-plaintext highlighter-rouge">gtk.c.types</code> as mentioned in the comment below the import statements.</p>

<p>And there’s quite an array of cursor shapes available, too, all that you’d expect to see plus several dozen more. I picked a few for this demo: <code class="language-plaintext highlighter-rouge">HEART</code>, <code class="language-plaintext highlighter-rouge">GUMBY</code>, and <code class="language-plaintext highlighter-rouge">HAND1</code>.</p>

<h3 id="other-differences-in-the-code">Other Differences in the Code</h3>

<p>I made an arbitrary change to how the buttons are added. Because there are three, I stuffed them into an array of <code class="language-plaintext highlighter-rouge">Button</code>s and used a <code class="language-plaintext highlighter-rouge">foreach()</code> to pop them into the <code class="language-plaintext highlighter-rouge">Layout</code>, increasing the <code class="language-plaintext highlighter-rouge">y</code> location each time by 80 pixels:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">()</span>
<span class="p">{</span>
	<span class="k">super</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>
	
	<span class="n">HandButton</span> <span class="n">handButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">HandButton</span><span class="p">();</span>
	<span class="n">HeartButton</span> <span class="n">heartButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">HeartButton</span><span class="p">();</span>
	<span class="n">GumbyButton</span> <span class="n">gumbyButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">GumbyButton</span><span class="p">();</span>

	<span class="n">buttons</span> <span class="p">=</span> <span class="p">[</span><span class="n">handButton</span><span class="p">,</span> <span class="n">heartButton</span><span class="p">,</span> <span class="n">gumbyButton</span><span class="p">];</span>
	
	<span class="k">foreach</span><span class="p">(</span><span class="n">button</span><span class="p">;</span> <span class="n">buttons</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">put</span><span class="p">(</span><span class="n">button</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">);</span>
		<span class="n">y</span> <span class="p">+=</span> <span class="n">spacing</span><span class="p">;</span>
	<span class="p">}</span>

<span class="p">}</span> <span class="c1">// this()</span>
</code></pre></div></div>

<p>Because they’re widgets at heart, we can declare the array as an array of widgets as is done at the top of the <code class="language-plaintext highlighter-rouge">MyLayout</code> class:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Widget</span><span class="p">[]</span> <span class="n">buttons</span><span class="p">;</span>
</code></pre></div></div>

<p>We could also have made this an array of buttons, but it’s good to keep in mind that we can include other widgets in an array like this and get them into the GUI without writing out individual <code class="language-plaintext highlighter-rouge">put()</code> statements.</p>

<p>With minor differences, all three derived button classes are the same, so we’ll examine only one. And since Gumby (probably a registered trademark) is the more cartoon-like, let’s go there:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">GumbyButton</span> <span class="p">:</span> <span class="n">Button</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">title</span> <span class="p">=</span> <span class="s">"Gumby Over"</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">title</span><span class="p">);</span>
		
		<span class="n">addOnEnterNotify</span><span class="p">(&amp;</span><span class="n">onEnter</span><span class="p">);</span>
		<span class="n">addOnLeaveNotify</span><span class="p">(&amp;</span><span class="n">onLeave</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	

	<span class="k">public</span> <span class="kt">bool</span> <span class="n">onEnter</span><span class="p">(</span><span class="n">Event</span> <span class="n">event</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">widget</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">Cursor</span> <span class="n">myCursor</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Cursor</span><span class="p">(</span><span class="n">CursorType</span><span class="p">.</span><span class="n">GUMBY</span><span class="p">);</span>
		<span class="n">setCursor</span><span class="p">(</span><span class="n">myCursor</span><span class="p">);</span>

		<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// onEnter()</span>


	<span class="k">public</span> <span class="kt">bool</span> <span class="n">onLeave</span><span class="p">(</span><span class="n">Event</span> <span class="n">event</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">widget</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">resetCursor</span><span class="p">();</span>

		<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// onLeave()</span>

<span class="p">}</span> <span class="c1">// class GumbyButton</span>
</code></pre></div></div>

<h3 id="disecting-gumby">Disecting Gumby</h3>

<p>In the constructor, all we do is call the parent class to create the button, then hook up the <code class="language-plaintext highlighter-rouge">Enter</code> and <code class="language-plaintext highlighter-rouge">Leave</code> signals.</p>

<p>The <code class="language-plaintext highlighter-rouge">onEnter()</code> function is no stranger. It expects a <em>Boolean</em> return value which (thinking back) we know can be used for chaining signals. We don’t in this case. From there, we create and change the cursor shape.</p>

<p><code class="language-plaintext highlighter-rouge">onLeave()</code> is simpler. All it does is reset the cursor to the default shape.</p>

<p>And that’s it.</p>

<h3 id="bonus-code-example-all-mouse-actions">Bonus Code Example: All Mouse Actions</h3>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/005_mouse/mouse_08.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/005_mouse/mouse_08_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/005_mouse/mouse_08_all_actions.d" target="_blank">here</a>.
	</div>
</div>

<p>Okay, not all, but quite a few. There are other signals you could hook up. If you want to play around, I encourage you to take a look at the <code class="language-plaintext highlighter-rouge">GdkEventType</code> enum starting on line number 947 of <a href="https://github.com/gtkd-developers/GtkD/blob/master/generated/gtkd/gdk/c/types.d">the gdk types.d file</a>.</p>

<p>So, happy D-coding and may the Widgets be with you, as always.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0016-scroll-pointer-all.html">Previous: Scrollwheel, etc.</a>
	</div>
	<div style="float: right;">
		<a href="./0018-variations-on-a-text-entry.html">Next: Text Entry Variations</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0017-change-pointer.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
